/**
 * Tatoeba Project, free collaborative creation of multilingual corpuses project
 * Copyright (C) 2010  HO Ngoc Phuong Trang <tranglich@gmail.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http: //www.gnu.org/licenses/>.
 */

/*
 * --------------------------------------------------------------------
 *
 *   autocompletion.css
 *
 * --------------------------------------------------------------------
 */

#autocompletionDiv {
    position: absolute;
}

#autocompletionDiv ul {
    border: 1px solid #CCC;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 22px;
    z-index: 999;
    background: #FFF;
}

#autocompletionDiv .selected {
    background: #FFE684;
    color: #FFF;
}

#autocompletionDiv a {
    display: block;
    padding: 2px 2px 2px 10px;
    text-indent: -10px;
}


/*
 * --------------------------------------------------------------------
 *
 *   current_contributors.css
 *
 * --------------------------------------------------------------------
 */

 .currentContributor {
    border: 1px solid #DDD;
    margin: 5px;
    padding: 5px;
}

.currentContributor .image,
.currentContributor .info,
.currentContributor .activityBar {
    display: inline-block;
    vertical-align: middle;
}

.currentContributor .image {
    margin-right: 10px;
}

.currentContributor .image img {
    display: block;
}

.currentContributor .info {
    width: 155px;
}

.currentContributor .username {
    font-size: 1.2em;
    line-height: 20px;
}

.currentContributor .score {
    display: inline-block;
    color: #777;
    font-size: 0.8em;
    line-height: 15px;
}

.activityBar {
    border: 1px solid #CCC;
    width: 10px;
    margin: 2px 0;
}

.activityBar .box{
    height: 5px;
    margin: 1px;
}

.activityBar .level0 {
}

.activityBar .level1 {
    background: #00CBE7;
}

.activityBar .level2 {
    background: #00DA3C;
}

.activityBar .level3 {
    background: #F4F328;
}

.activityBar .level4 {
    background: #FD8603;
}

.activityBar .level5 {
    background: #DF151A;
}


/*
 * --------------------------------------------------------------------
 *
 *   Logs
 *
 * --------------------------------------------------------------------
 */

#logs md-list-item {
    padding: 5px 15px;
    border-width: 12px;
    border-left-style: solid;
    background: #fff;
}

html[dir="rtl"] #logs md-list-item {
    border-right-style: solid;
    border-left-style: none;
}

#logs md-list-item.sentence-insert {
    border-color: #4CAF50;
}

#logs md-list-item.sentence-delete {
    border-color: #F44336;
}

#logs md-list-item.sentence-update {
    border-color: #FFEB3B;
}

#logs md-list-item.sentence-obsolete {
    border-color: #e0e0e0;
}

#logs md-list-item.license-insert {
    border-color: #607D8B;
}

#logs md-list-item.license-update {
    border-color: #B0BEC5;
}

#logs span.license {
    font-style: italic;
}

#logs md-list-item.link-insert {
    border-color: #03a9f4;
}

#logs md-list-item.link-delete {
    border-color: #ff9800;
}

#logs md-list-item.md-2-line {
    border-bottom: 1px solid #f1f1f1;
}

#logs .lang {
    margin: 0 10px;
}

#logs .content {
    text-align: left;
}

html[dir="rtl"] #logs .content {
    text-align: right;
}

/*
 * Logs hovering feature
 */

.sentences_set .highlighted {
    background-color: #f7d6b2;
}

#logs .link-insert.hovered {
    cursor: pointer;
    background-color: #fafafa;
}

#logs .link-insert.historyHighlighted {
    background-color: #eeeeee;
}


/*
 * --------------------------------------------------------------------
 *
 *   Comments
 *
 * --------------------------------------------------------------------
 */

.comment .md-title {
    font-weight: 700;
}

.comment .md-title a {
    color: inherit;
}

.comment .md-subhead {
    max-width: 340px;
    cursor: help;
}

.comment-sentence {
    padding: 16px 16px 10px 16px;
    margin: 8px 7px -8px 7px;
    border: 1px solid #ccc;
}

.comment-sentence .info {
    font-size: 14px;
    margin: 0 10px;
}

.comment-sentence .lang {
    margin: 0 10px;
    display: block;
}

.comment-sentence .text {
    margin: 5px 10px;
    text-align: left;
}

html[dir="rtl"] .comment-sentence .text {
    text-align: right;
}

.comment .inappropriate .warning-info p {
    padding: 0 10px;
    margin: 0;
}

.comment .inappropriate .content {
    color: #d50000;
    border-top: 1px #f1f1f1 solid;
    padding-top: 10px;
}

.comment.form .content{
    background: #f1f1f1;
    border-top: 1px solid #ddd;
}

.comment.form .md-subhead {
    cursor: initial;
}

.comment.form md-card-header {
    background: #fafafa;
}

.comment.form textarea {
    width: 100%;
    height: 200px;
}

/*
 * --------------------------------------------------------------------
 *
 *   message.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Message header (general)
 */

.message .header {
    position: relative;
}

.message .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.message .header li {
    display: inline-block;
}

.message .header a {
    background-color: #EAF2E6;
    border: 1px solid #D9EAAB;
}

.message .header a:hover {
    background-color: #FFF1DD;
    border: 1px solid #FFD7A3;
}


/*
 * Message header (info)
 */

.message .info {
    display: inline-block;
    bottom: 0;
}

.message .other {
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;
}

.message .avatar {
    border: 1px solid #ccc;
    border-bottom: none;
    border-left: none;
    padding: 10px 10px 3px 10px;
    background-color: #fff;
    margin-bottom: -1px;
    border-top-right-radius: 4px;
    display: inline-block;
    vertical-align: top;
}

.message .avatar img {
    display: inline-block;
}

.message .avatar a, .message .avatar a:hover {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    display: block;
    width: 36px;
    height: 36px;
}

.message .username {
    display: inline-block;
}

.message .username > :first-child {
    display: inline-block;
    border-left: none;
    text-align: center;
    padding: 0 10px;
    min-width: 120px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 16px;
}

.message .username a:hover {
    border-left: none;
}

.message .pm {
    display: inline-block;
    margin-left: 2px;
    margin-bottom: 2px;
    vertical-align: bottom;
}

.message .pm a {
    border: none;
    display: block;
    background: url('../../img/pm.svg') center;
    background-size: cover;
    width: 18px;
    height: 18px;
}

.message .pm a:hover {
    border: none;
    background: url('../../img/pm-hover.svg') center;
    background-size: cover;
}

.message .date {
    margin-left: 10px;
    padding-right: 30px;
    margin-top: 2px;
    color: #999;
    bottom: 0;
    font-size: 12px;
    min-width: 120px;
    text-align: center;
}

.message .date .created,
.message .date .edited {
    cursor: help;
}


/*
 * Message header (menu)
 */

.message .menu {
    position: absolute;
    right: 5px;
    bottom: 0;
    display: inline-block;
}

.message .menu li {
    vertical-align: bottom;
}

.message .menu li a{
    display: block;
    border-bottom: none;
    padding: 2px 5px;
    margin: 0 2px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.message .menu li a:hover {
    border-bottom: none;
}

.message .menu img {
    margin: 2px 0;
}


/*
 * Message body
 */

.message .body {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.message .body .sentence {
    position: relative;
    border-bottom: 1px dotted #ddd;
    padding: 10px;
}

.message .body .sentenceText {
    color: #666;
    margin: 0 5px 0 7px;
}

.message .body .langIcon {
    display: inline-block;
    vertical-align: middle;
}

.message .body .content {
    padding: 20px;
}

.message .body > .textarea {
    padding: 20px 20px 0 20px;
}


/*
 * Form
 */
.message.form .title {
    display: inline-block;
    vertical-align: bottom;
    font-size: 16px;
    margin: 10px;
    font-weight: bold;
}

.message.form textarea {
    width: 100%;
    height: 200px;
}

.message.form .body, .message.form .avatar {
    background-color: #f1f1f1;
}


/*
 * --------------------------------------------------------------------
 *
 *   new_sentence_form.css
 *
 * --------------------------------------------------------------------
 */

/*
 * New sentence form
 */
#SentenceText {
    width: 100%;
    font-size: 1em;
}

#newSentence .submit, #newSentence .input {
    display: inline;
}

/*
 * --------------------------------------------------------------------
 *
 *   pagination.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Pagination
 */

.paging {
    margin: 20px 0;
    text-align: center;
    min-height: 26px;
}

.paging li {
    display: inline-block;
}

.paging li a {
    padding: 5px 8px;
    margin: 3px;
    line-height: 24px;
    background: #EEEEEE;
    color: #757575;
}

.paging li a:hover {
    background: #E0E0E0;
    color: #757575;
}

.paging li.disabled a {
    background: #EEE;
    color: #BDBDBD;
}

.paging li.active a {
    padding: 5px 8px;
    margin: 3px;
    background: #4caf50;
    color: #FFFFFF;
    font-weight: bold;
}

.paging  {
    padding: 0 10px;
    font-size: 10.5pt;
}

.paging li.prev a, .paging li.next a {
    background: none;
}

.paging li.prev md-icon,
.paging li.next md-icon {
    color: #4caf50;
}

.paging li.prev a:hover md-icon,
.paging li.next a:hover md-icon {
    color: #DD8800;
}

.paging li.disabled a md-icon,
.paging li.disabled a:hover md-icon {
    color: #BDBDBD;
}

/*
 * --------------------------------------------------------------------
 *
 *   private_message_form.css
 *
 * --------------------------------------------------------------------
 */

 #private-message-form {
    background: #fafafa;
}

#private-message-form .md-errors-spacer {
    display: none;
}


/*
 * --------------------------------------------------------------------
 *
 *   profile_pic.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Profile picture
 */
#pimg {
    padding: 1px;
    width: 130px;
}

#pimg img {
    width: 128px;
    height: 128px;
}


/*
 * --------------------------------------------------------------------
 *
 *   sentences_group.css
 *
 * --------------------------------------------------------------------
 */


/*
 * Sentence menu
 */
.sentences_set .menu {
    border-bottom: 1px dotted #CCC;
    margin: 2px;
    padding: 5px;
}

.sentences_set .menu li {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 8px;
}

.sentences_set .menu .adopt-item {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin: 2px;
    font-weight: bold;
    font-size: 14px;
}

.sentences_set .menu .is-native {
    font-weight: normal;
    color: #999999;
}

.sentences_set .menu li.adopt {
    margin: 0px;
    float: right;
}

.sentences_set .menu li a {
    display: block;
}

.sentences_set .menu .option a,
.sentences_set .menu .option,
.sentences_set .link.button {
    color: #aaaaaa;
    height: 16px;
    width: 16px;
}

.sentences_set .menu .option a:hover,
.sentences_set .menu .option:hover,
.sentences_set .link.button:hover {
    color: #222;
}

.sentences_set .menu a.disabled,
.sentences_set .menu a.disabled:hover,
.sentences_set .menu .adopt-item.uneditable {
    color: #CCC;
}

.listOfLists {
    width: 150px;
}

.draggableLink {
    box-shadow: inset 0 0 2px 2px #f8ad15;
}

.sentences_set .menu .correctness {
    display: inline-block;
    width: 100px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.sentences_set .menu .correctness .option {
    margin: 0 3px;
}

.sentences_set .menu .correctness .selected {
    opacity: 1;
}


/*
 * Sentence
 */
.addTranslations .navigationIcon,
.sentence .navigationIcon {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    display: inline-block;
}

.addTranslations .navigationIcon {
    vertical-align: top;
}

.sentence {
    padding: 4px 0px;
    background: #fff;
}

.sentences_set .sentence:hover {
    background: #f1f1f1;
}

.sentence .column {
    display: inline-block;
    vertical-align: text-top;
    margin: 0 4px;
}

.sentence .nav.column {
    height: 25px;
}

.sentence .lang.column {
    height: 25px;
    position: relative;
}

.sentence .content.column {
    width: 520px;
}

.sentence .content.column.add{
    font-style: italic;
    width: 604px;
    font-size: 14px;
    vertical-align: middle;
}

.sentence .content.column.remove {
    width: 515px;
}


.sentence .audio.column {
}

.sentence .link.button {
    float: left;
    margin: 4px 7px 0 5px;
    height: 16px;
}

.sentence .copy.column {
    float: right;
    height: 21px;
}
.sentence .copy-btn {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 5px;
}

.sentence .copy-btn.copied {
    background: greenyellow;
}

.sentence .languageFlag {
    margin-top: 2px;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
}

.sentence .audioButton {
    margin-top: 3px;
}

.sentence .favorite-page.column{
    list-style-type: none;
}

.sentence .favorite-page.column a{
    color: gray;
    width: 24px;
    height: 24px;
}

.sentence .favorite-page.column svg:hover{
    color: black;
}

.translations .text {
    margin-top: 3px;
}


/*
 * Transcriptions
 */

.transcriptions .menu li {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 8px;
}

.transcriptions .menu .option {
    color: #aaaaaa;
    height: 16px;
    width: 16px;
}

.transcriptions .menu .option a:hover,
.transcriptions .menu .option:hover {
    color: #222;
}

.transcriptions .menu a.disabled,
.transcriptions .menu a.disabled:hover {
    color: #CCC;
}

.hidden {
    display: none;
}

.transcribe-buttons {
    display: inline-block;
    padding-left: 0;
}

.script-icon {
    color: #222;
    background: #CCC;
    border-radius: 25%;
}

.script-icon.altscript {
    color: #CCC;
    background: #222;
}

.menu .option.script {
    width: 20px;
    height: 20px;
}

.menu .review svg {
    position: absolute;
}

.menu .review svg.check {
    display: none;
}

.menu .review:hover svg.check {
    cursor: pointer;
    display: block;
}

.transcriptions .menu {
    border: none;
    margin: 0;
    padding: 0;
}

.transcriptions .column {
    margin: 0;
}

.transcriptions .transcription {
    color: #A1A1A1;
    width: 500px;
    padding-left: 8px;
    vertical-align: middle;
}

.mainSentence .transcription {
    font-size: 80%;
}

.mainSentence .transcription.altscript {
    font-size: 100%;
}

.transcriptions .script img {
    display: block;
    font-size: 7px;
}

.inlined-icon {
    display: inline;
    vertical-align: text-bottom;
    height: 16px;
    width: 16px;
}

.validation-errors {
    color: #222;
    background: #FF2020;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px;
}

.validation-errors ul {
    margin: 5px 0;
}

/*
 * Flag
 */
.editableFlag:hover {
    cursor: pointer;
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
}

.selectLang {
    display: none;
    position: absolute;
    top: -3px;
    left: 40px;
}



/*
 * Main sentences
 */

.mainSentence, .mainSentence .editableSentence textarea {
    font-size: 24px;
}

.mainSentence .navigationIcon {
    color: #98CB4A;
    margin-top: 3px;
}

.mainSentence:hover .navigationIcon {
    color: #FFF;
    background: #98CB4A;
}

.mainSentence .languageFlag {
    margin-top: 4px;
}


/*
 * Translations
 */

.indirectTranslation {
    color: #998778;
}

.directTranslation .navigationIcon {
    color: #64C8E6;
}

.directTranslation:hover .navigationIcon {
    color: #FFFFFF;
    background: #64C8E6;
}

.indirectTranslation .navigationIcon {
    opacity: 0.6;
    color: #998778;
}

.indirectTranslation:hover .navigationIcon {
    color: #FFFFFF;
    background: #998778;
}


/*
 * Editing sentences
 */
.sentences_set div.submit {
    display: inline;
}

.sentences_set div.input {
    display: inline;
}



/*
 * Edit in place
 */
.edit, .edit_transcription {
   cursor: pointer;
}

.editableSentence button{
    padding: 1px 20px;
    min-width: 120px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    float: right;
    margin-top: 10px;
}

.editableSentence button[type="cancel"]{
    margin-right: 20px;
    display: inline-block;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    color: #000000;
}

.editableSentence button[type="submit"] {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: #fff;
}

.editableSentence button[disabled]{
    background-color: #ccc;
    border-color: #aaa;
}

.editableSentence textarea{
    margin: 0;
    padding: 0;
}

.editableSentence {
   overflow:hidden;
}

.translations .editableSentence textarea {
    font-size: 15px;
}

/*
 * Link to a sentence number
 */
input.sentenceId {
    width: 120px;
    text-align: right;
}


/*
 * Add Translations
 */
.addTranslations {
    display: none;
    padding:4px 0 24px;
    font-size: 16px;
    margin-bottom:10px;
}

.addTranslations input {
    display: inline;
}

.addTranslations textarea  {
    display: inline;
    height: 75px;
    width: 100%;
    font-size: 16px;
}

.addTranslations button{
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    min-width: 120px;
    padding: 3px 30px;
    float:right;
    line-height: 18px;
}

.addTranslationsTextInput {
    width: 100%;
    font-size: 14px;
    margin-bottom: 10px;
}

.addTranslations .navigationIcon {
    margin-left: 4px;
    margin-right: 5px;
    margin-top: 0px;
    color: #64C8E6;
}

.addTranslations .form {
    width: 530px;
    display: inline-block;
}

.addTranslations .languageSection label,
.addTranslations .languageSection select,
.addTranslations .languageSection img {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.addTranslation_buttons{
    margin-top: 15px;
}

/*
 * Audio
 */
.audioButton {
    display: block;
    width: 20px;
    height: 20px;
}

.audioButton:focus {
    outline: none;
}

.audioButton::-moz-focus-inner {
    border: none;
}

.audioButton.audioAvailable {
    border: none;
    background: url(../../img/audio.svg);
}
.audioButton.audioAvailable:not(.nextAudioToPlay) {
    display: none;
}

.audioButton.audioUnavailable {
    background: url(../../img/audio-unavailable.svg);
    opacity: 0.3;
}

.md-icon-button.audioUnavailable {
    opacity: 0.3;
}

/*
 * Sentence correctness
 */
.correctnessNegative1 {
    background: url("/img/warning-small.svg") no-repeat;
    padding-right: 25px;
    color: #EE0000;
    overflow: hidden;
}

.mainSentence .correctnessNegative1 {
    background-position: right 5px;
}

.translations .correctnessNegative1 {
    background-position: right 2px;
}

.correctness-info .ok,
.sentences_set .menu .ok.selected a {
    color: #00AA00;
}
.correctness-info .not-ok,
.sentences_set .menu .not-ok.selected a {
    color: #EE0000;
}
.correctness-info .unsure,
.sentences_set .menu .unsure.selected a {
    color: #FF9900;
}


/*
 * Ajax messages
 */

.sentences_set .error {
    padding: 8px 8px 8px 32px;
    border: #E1E1E1 1px solid;
    background: #F1F1F1 url(/img/error_16x16.png) no-repeat 8px center;
}


/*
 * collapsible sentence lists
 */
.more {
    display: none;
}

div.showLink, div.hideLink {
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}

div.showLink {
    background: rgba(0, 102, 170, 0.1);
    color: #06A;
    padding: 2px 10px;
}

div.hideLink {
    display: none;
    background: #06A;
    color: #fff;
    padding: 3px 10px;
}


/*
 *
 */
.sentence-and-translations {
    background-color: #fff;
    padding-bottom: 2px;
}

.sentence-and-translations .header {
    flex-direction: row-reverse;
}

.sentence-and-translations .menu {
    background: #fafafa;
    border-bottom-left-radius: 15px;
}
html[dir="rtl"] .sentence-and-translations .menu {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: 15px;
}

.sentence-and-translations .text {
    min-width: 0;
}

.sentence-and-translations .text,
.sentence-and-translations .lang {
    margin: 3px 0;
    padding: 0 10px;
}

.sentence-and-translations .sentence {
    padding: 10px;
}

.sentence-and-translations .sentence .text {
    font-size: 24px;
}

.sentence-and-translations .translation {
    padding: 0px 10px;
}

.sentence-and-translations .md-subheader {
    background: #fff;
}

.sentence-and-translations .md-subheader ._md-subheader-inner {
    padding: 10px 5px;
}

.sentence-and-translations .direct.translations .chevron {
    color: #000000;
}

.sentence-and-translations .indirect.translations .chevron {
    color: #bdbdbd;
}

.sentence-and-translations .sentence:hover,
.sentence-and-translations .translation:hover {
    background-color: #f5f5f5;
}

.sentence-and-translations .lang img {
    display: block;
}

.sentence-and-translations .not-reliable .text {
    color: #D32F2F;
}

.sentence-and-translations .md-errors-spacer {
    display: none;
}

.sentence-and-translations md-list-item.md-clickable:hover {
    background: #f1f1f1;
}

.sentence-and-translations .indicator md-icon {
    padding: 8px;
    cursor: help;
}

.sentence-and-translations .list-form {
    border-top: 1px solid #f1f1f1;
    padding-top: 10px;
}

.sentence-and-translations .list-form md-list {
    height: 310px;
    overflow-y: scroll;
    border-top: 1px solid #f1f1f1;
}

.sentence-and-translations .list-form .last-selected {
    color: grey;
    padding: 0 5px;
}

.sentence-and-translations .duplicate-warning {
    border-bottom: 1px solid #f1f1f1
}

.sentence-and-translations .translation-form {
    background: #fafafa; 
    border-top: 1px solid #f1f1f1
}

.sentence-and-translations .sentence-form,
.sentence-and-translations .translation-form form {
    padding-top: 10px;
}

form .language-icon-div {
    padding: 10px 10px 0 10px;
}
.sentence-and-translations .sentence .transcription .icon {
    margin: 0 8px 0 19px;
}
html[dir="rtl"] .sentence-and-translations .sentence .transcription .icon {
    margin: 0 19px 0 8px;
}
.sentence-and-translations .sentence .transcription .text {
    color: #A1A1A1;
    font-size: 24px;
}

.sentence-and-translations .translation .transcription .icon {
    margin: 0 20px 0 40px;
}
html[dir="rtl"] .sentence-and-translations .translation .transcription .icon {
    margin: 0 40px 0 20px;
}
.sentence-and-translations .translation.trusted-user.expanded .transcription .icon {
    margin: 0 20px 0 69px;
}
html[dir="rtl"] .sentence-and-translations .translation.trusted-user.expanded .transcription .icon {
    margin: 0 69px 0 20px;
}
.sentence-and-translations .translation .transcription .text {
    color: #A1A1A1;
    padding: 0;
}

.sentence-and-translations div:focus {
    outline: none;
    border: 0;
}

.sentence-and-translations .expand-collapse .md-button {
    margin: 2px 2px 0 2px;
}

@media only screen and (max-width: 600px) {    
    .sentence-and-translations .buttons {
        display: none;
    }
    .sentence-and-translations .chevron {
        display: none;
    }
    .sentence-and-translations .sentence .text,
    .sentence-and-translations .sentence .transcription .text {
        font-size: 18px;
    }

    .sentence-and-translations .text,
    .sentence-and-translations .lang {
        padding: 0 5px;
    }

    .sentence-and-translations .sentence .transcription .icon {
        margin: 0 5px 0 12px;
    }
    .sentence-and-translations .translation .transcription .icon {
        margin: 0 10px 0 12px;
    }

    .sentence-and-translations .md-icon-button.activated {
        display: inherit;
    }
    .sentence-and-translations .md-icon-button.deactivated {
        display: none;
    }
}


/*
 * --------------------------------------------------------------------
 *
 *   sentences_stats.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Sentences statistics
 */
.sentencesStats {
    margin: 5px 0;
}

.stat {
    overflow: auto;
    margin: 5px 0;
}

.stat .total,
.stat .langCode {
    display: inline-block;
}

.stat .langCode {
    display: none;
}

.stat .total {
    margin: 0 5px;
}

.stat img {
    float: left;
}

.sentences-stats p {
    padding-left: 10px;
}


/*
 * --------------------------------------------------------------------
 *
 *   status_colors.css
 *
 * --------------------------------------------------------------------
 */

.status_admin {
    color: red;
}

.status_corpus_maintainer {
    color: orange;
}

.status_advanced_contributor {
    color: #00B712;
}

.status_contributor {
    color: #42B0FF;
}


/*
 * --------------------------------------------------------------------
 *
 *   tool_form_and_result.css
 *
 * --------------------------------------------------------------------
 */

/*
 * Tool form and result
 */
#ToolQuery {
    width: 100%;
    height: 150px;
}

#ToolFuriganaForm {
    font-size: 16px;
    margin: 20px;
}

#ToolFuriganaForm fieldset {
    border: none;
}

#ToolFuriganaForm legend {
    display: inline;
}

#ToolFuriganaForm div.submit, #ToolFuriganaForm p {
    text-align: center;
}

#ToolFuriganaForm * {
    font-size: 16px;
}

#conversion {
    font-size: 20px;
    margin: 20px;
    padding: 10px 0;
}


/*
 * --------------------------------------------------------------------
 *
 *   wall_messages.css
 *
 * --------------------------------------------------------------------
 */

.wall-thread {
    margin: 40px 0;
}

.report .wall-message md-card-header,
.wall.form md-card-header,
.wall-thread md-card-header {
    background: #fafafa;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
}

.wall-thread {
    border-left: 7px solid #cae2aa;
}

.wall-thread .reply {
    border-left: 5px solid #eaf2e6;
}

.wall-thread .form,
.wall-thread .reply {
    box-shadow: none;
    margin: 5px 0 0 1px;
}

.wall.form textarea {
    width: 100%;
    height: 200px;
}

.wall .reply-saved {
    background: #E8FFCC;
    white-space: pre-line;
}

/*
 * --------------------------------------------------------------------
 *
 *   Buttons
 *
 * --------------------------------------------------------------------
 */

.form .button {
    display: inline-block;
    min-width: 120px;
    padding: 2px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-left: 20px;
    font-size: 16px;
    box-sizing: border-box;
}

.form .button.submit {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: #fff;
}

.form .button.cancel {
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    color: #000000;
}

/*
 * --------------------------------------------------------------------
 *
 *   Sort
 *
 * --------------------------------------------------------------------
 */

.sortBy {
    text-align: center;
    margin: 20px;
}

.sortBy .desc, .sortBy .asc {
/*    font-weight: bold; */
}

.sortBy .desc::after {
    content: "\02B07";
    vertical-align: middle;
}

.sortBy .asc::after {
    content: "\02B06";
    vertical-align: middle;
}

.sortOption {
    padding-right: 12px;
}


/*
 * --------------------------------------------------------------------
 *
 *   Tags
 *
 * --------------------------------------------------------------------
 */

.tag {
    display: inline-block;
    border-bottom: 1px solid #DDD;
    border-right: 1px solid #DDD;
    background: #FFE684;
    padding: 2px 8px;
    margin: 2px 0;
    border-radius: 5px;
}



/*
 * --------------------------------------------------------------------
 *
 *   Languages
 *
 * --------------------------------------------------------------------
 */

.language-dropdown-container {
    width: 200px;
    display: inline-block;
    vertical-align: bottom;
}

.language-dropdown li {
    line-height: 42px;
    height: 42px;
}

/* Custom md-not-found with "Show all" button */
md-virtual-repeat-container.md-not-found {
    min-height: 84px;
}
.md-not-found .language-dropdown li {
    font-size: 14px;
    padding: 0 15px;
}
.md-not-found .language-dropdown button {
    margin: 0;
}

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    width: 280px;
}

.md-autocomplete-suggestions-container li .highlight{
    color: #222222;
    background-color: #ffff8d;
}

.priority-language {
    font-weight: bold;
}

svg.language-icon {
  width: 30px;
  height: 20px;
  margin-right: 0.5em;
}

html[dir="rtl"] svg.language-icon {
  margin-right: 0;
  margin-left: 0.5em;
}

.language-dropdown .language-icon {
    display: inline-block;
    vertical-align: middle;
}

md-autocomplete-wrap:not(.md-menu-showing) input.ng-invalid {
    color: red;
    transition-delay: 0.2s;
    transition-property: color;
}

.usersLanguages .languageInfo {
    margin: 0;
    padding: 0;
}

.usersLanguages td {
    padding: 5px;
}

.warning-add-language {
    font-size: 16px;
    padding: 10px 15px;
    margin: 10px;
    background: #F1F1F1;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
}

.warning-add-language .text {
    text-align: left;
    margin-bottom: 20px;
}

.warning-add-language {
    text-align: right;
}

#annexe_content .language-selector {
    width: 99%;
}


/*
 * --------------------------------------------------------------------
 *
 *   Lists
 *
 * --------------------------------------------------------------------
 */

.listSummary td {
    padding: 5px;
    border-top: 1px dotted #DDD;
}

.listSummary .count {
    color: #777;
    background: #E5E5E5;
    float: right;
    padding: 10px 0;
    min-width: 45px;
    text-align: center;
    font-size: 1.2em;
}

.listSummary .name {
    min-width: 250px;
}

.noNameMinLength .spacer{
    width: 60%;
}

.listSummary .creator {
    padding: 3px 10px;
    font-style: italic;
    color: #444;
}


.listSummary .date {
    text-align: center;
    color: #aaaaaa;
}

.listSummary .createdDate{
    text-align:left;
}

.listSummary .lastUpdatedDate .date{
    text-align:right;
    margin-right: 10px;
}

.noBorder td{
    border-top:none;
}

.listSummary .icon {
    color: #777777;
}

.listSummary .icon {
    width: 16px;
    height: 16px;
}

.listSummary.inactiveList a {
    color: #AAAAAA;
}


/*
 * --------------------------------------------------------------------
 *
 *   Loader
 *   http://codepen.io/bernethe/pen/dorozd
 *
 * --------------------------------------------------------------------
 */

.loader {
    display: inline-block;
    border: 4px rgba(0, 0, 0, 0.25) solid;
    border-top: 4px rgba(0, 0, 0, 1) solid;
    border-radius: 50%;
    -webkit-animation: spCircRot .6s infinite linear;
    animation: spCircRot .6s infinite linear;
}
@-webkit-keyframes spCircRot {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@keyframes spCircRot {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

.loader-small {
    width: 11px;
    height: 11px;
    border-width: 3px;
}

.sentence-loader {
    width: 20px;
    height: 20px;
    margin: 2px 0 0 10px;
}

.translation-loader {
    display: block;
    margin: 0px auto;
    width: 30px;
    height: 30px;
    border-width: 6px;
}

.block-loader {
    display: block;
    margin: 40px auto;
    width: 50px;
    height: 50px;
    border-width: 8px;
}


/*
 * --------------------------------------------------------------------
 *
 *   Menu in sidebar
 *
 * --------------------------------------------------------------------
 */

.annexe-menu {
    padding: 0;
    margin-bottom: 20px;
}
.annexe-menu md-list-item:first-of-type {
    border-top: 1px solid #f1f1f1;
}
.annexe-menu md-list-item {
    border-bottom: 1px solid #f1f1f1;
}
.annexe-menu .md-subheader-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.annexe-menu md-icon {
    margin: auto 0;
}

/*
 * --------------------------------------------------------------------
 *
 *   Login dialog
 *
 * --------------------------------------------------------------------
 */

#login-dialog {
    width: 300px;
}

#login-dialog md-dialog-content {
    padding: 40px 20px 10px 20px;
}

/*
 * --------------------------------------------------------------------
 *
 *   Wrapping toolbars
 *
 * --------------------------------------------------------------------
 */

.md-toolbar-tools.layout-wrap {
    height: unset;
    max-height: unset;
}

.md-toolbar-tools.layout-wrap > * {
    margin: 8px 0;
}

.md-toolbar-tools.layout-wrap .md-icon-button {
    margin: 6px 0px;
}

/*
 * --------------------------------------------------------------------
 *
 *   Info boxes
 *
 * --------------------------------------------------------------------
 */

.infobox {
  margin-left: 10px;
  margin-right: 10px;
}

md-tooltip.multiline {
    /* Only wrap tooltip if it takes more than 90% of page width. */
    max-width: 90%;
    height: auto;
    white-space: normal;
    /* The original md-tooltip use line-height to pad, but we want a nice
     * multi-line text, so we need to use the padding property instead. */
    line-height: normal;
    padding: 5px 8px;
}

@media (min-width: 600px) {
    md-tooltip.multiline {
        max-width: 60%;
    }
}
@media (min-width: 960px) {
    md-tooltip.multiline {
        max-width: 20%;
    }
}
